<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { getbanner1, foodshop } from '../../api/home'

const active = ref('')
const value = ref('')
const banner1 = ref([])
const foodShop = ref([])
const router = useRouter()
function onClickLeft() {
    // console.log(1111);
    router.back()
}
getbanner1().then(res => {
    // console.log(res.data.data);
    banner1.value = res.data.data
})

foodshop().then(res => {
    foodShop.value = res.data.data
    // console.log(foodShop.value);
})

function value1() {
    foodshop().then(res => {
        // console.log(res.data.data);
        const arr = res.data.data.filter(i => {
            return i.text.includes(value.value)
        })

        foodShop.value = arr

    })
}

function getdata(item) {
    console.log(item.id);
    if (item.id === 1) {
        router.push('/restaurant')
    } else if (item.id === 2) {
        router.push('/restaurant1')

    } else if (item.id === 3) {
        router.push('/restaurant2')

    } else if (item.id === 4) {
        router.push('/restaurant3')

    } else if (item.id === 5) {
        router.push('/restaurant4')

    } else if (item.id === 6) {
        router.push('/restaurant5')

    } else if (item.id === 7) {
        router.push('/restaurant6')

    }
}
</script>

<template>
    <div class="box">
        <van-nav-bar title="美食" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content">

            <van-search v-model="value" placeholder="请输入搜索关键词" @change="value1" />

            <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
                <van-swipe-item v-for="item in banner1" :key="item.id">
                    <van-image :src=item.img />
                </van-swipe-item>
            </van-swipe>

            <van-card v-for="item in foodShop" :price="item.price" :desc="item.information" :title="item.text" num="2人"
                :thumb="item.img" @click="getdata(item)" />
        </div>
    </div>
</template>


<style scoped ></style>